<div class="page" (click)="onClick()">
  <div class="menus" [class.clicked]="menuClicked" (click)="onClickMenu($event)">
    <div class="item pointer" (click)="onHome()">
      <img src="/assets/img/favicon.ico" />
    </div>
    <div class="item">
      <a (click)="onHome()">
        文件
      </a>
      <div class="dropdown">
        <div class="item">
          <a (click)="onMenu('new')">
            新建文件
          </a>
        </div>
        <div class="item">
          <a (click)="onMenu('open')">
            打开本地文件（新建）
          </a>
        </div>
        <div class="item">
          <a (click)="onMenu('open', true)">
            导入本地文件...
          </a>
        </div>
        <div class="item" (mouseenter)="showFigure = true" (mouseleave)="onLeaveFigure()">
          <a>
            打开最近的文件
            <i class="iconfont icon-angle-right"></i>
          </a>
          <div class="dropdown pt15" [class.block]="showFigure">
            <figure>
              <div *ngIf="list.recently.length" class="mb20">
                <div class="flex wrap">
                  <a
                    class="topo"
                    *ngFor="let item of list.recently"
                    [title]="item.name"
                    routerLink="/workspace"
                    [queryParams]="{ id: item.id, fileId: item.fileId }"
                  >
                    <img [appImgAuthSrc]="item.image" />
                  </a>
                </div>
              </div>
            </figure>
          </div>
        </div>
        <div class="item line"></div>
        <div [class.disabled]="!editMode">
          <div class="item">
            <a (click)="onMenu('save')">
              保存到云端
            </a>
          </div>
          <div class="item">
            <a (click)="onMenu('saveAs')">
              另存为...（在云端）
            </a>
          </div>
          <div class="item">
            <a (click)="onMenu('down')">
              保存到本地
            </a>
          </div>
          <div class="item line"></div>
          <div class="item">
            <a (click)="onMenu('downPng')">
              下载为PNG
            </a>
          </div>
          <div class="item">
            <a (click)="onMenu('downSvg')">
              下载为SVG
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="item">
      <a>编辑</a>
      <div class="dropdown" [class.disabled]="!editMode">
        <div class="item">
          <a (click)="onMenu('undo')">
            撤消
            <span class="ml50">Ctrl + Z</span>
          </a>
        </div>
        <div class="item">
          <a (click)="onMenu('redo')">
            恢复
            <span class="ml50">Ctrl + Shift+ Z</span>
          </a>
        </div>
        <div class="item line"></div>
        <div class="item">
          <a (click)="onMenu('cut')">
            剪切
            <span class="ml50">Ctrl + X</span>
          </a>
        </div>
        <div class="item">
          <a (click)="onMenu('copy')">
            复制
            <span class="ml50">Ctrl + C</span>
          </a>
        </div>
        <div class="item">
          <a (click)="onMenu('parse')">
            粘贴
            <span class="ml50">Ctrl + V</span>
          </a>
        </div>
      </div>
    </div>
    <div class="item">
      <a>查看</a>
      <div class="dropdown">
        <div class="item">
          <a (click)="onHome()">
            大家分享的图文
          </a>
        </div>
        <div class="item line"></div>
        <div class="item">
          <a href="http://le5le.com" target="_blank">
            乐吾乐
          </a>
        </div>
      </div>
    </div>
    <div class="item">
      <a>社区</a>
      <div class="dropdown">
        <div class="item">
          <a (click)="showAbout = true" target="_blank">
            咨询与建议
          </a>
        </div>
        <div class="item">
          <a href="https://github.com/le5le-com/topology" target="_blank">
            开源GitHub
          </a>
        </div>
        <div class="item">
          <a href="https://www.yuque.com/alsmile/topology" target="_blank">
            开发文档
          </a>
        </div>
        <div class="item line"></div>
        <div class="item">
          <a *ngIf="file.id" (click)="onMenu('share')">
            分享
          </a>
          <div class="gray ml15" *ngIf="!file.id">分享</div>
        </div>
      </div>
    </div>
    <div class="item">
      <a>帮助</a>
      <div class="dropdown">
        <div class="item">
          <a href="http://le5le.com/app/topology" target="_blank">
            产品介绍
          </a>
        </div>
        <div class="item line"></div>
        <div class="item">
          <a (click)="showLicense = true">
            许可与声明
          </a>
        </div>
        <div class="item">
          <a (click)="showHelp = true">
            资助与加入
          </a>
        </div>
        <div class="item line"></div>
        <div class="item">
          <a (click)="showAbout = true">
            关于
          </a>
        </div>
      </div>
    </div>
    <div class="full text-center">
      <div *ngIf="editMode">
        <form
          class="inline"
          [class.hidden]="!editFilename"
          #myForm="ngForm"
          (ngSubmit)="onSubmit(myForm.invalid)"
          [uiTouchForm]="myForm"
          (click)="$event.stopPropagation()"
        >
          <input name="filename" #filenameInput class="input" [(ngModel)]="filename" required />
        </form>
        <div class="inline" *ngIf="!editFilename" (dblclick)="onEditFile(filenameInput)" title="双击修改">
          {{ filename || '空白文件' }}
        </div>
      </div>
    </div>
    <div class="flex" [class.disabled]="!editMode">
      <div class="separator"></div>
      <div class="item mh5">
        视图：{{ scale | number: '.0-2' }}%
        <a class="hover" *ngIf="scale !== 100" (click)="onMenu('scale', 1)" style="padding-right: 0;">
          还原
        </a>
      </div>
      <div class="separator"></div>
      <div *ngIf="!locked" class="item" (click)="locked = !locked; onMenu('lock', -1)" title="锁定">
        <a>
          <i class="iconfont icon-unlock"></i>
        </a>
      </div>
      <div *ngIf="locked" class="item" (click)="locked = !locked; onMenu('lock', 0)" title="解锁">
        <a>
          <i class="iconfont icon-lock"></i>
        </a>
      </div>
      <div class="separator"></div>
      <div class="item lines">
        <a>
          <i class="iconfont icon-{{ lineName }}" style="position: relative;top: .06rem;"></i>
        </a>
        <div class="dropdown">
          <div class="item">
            默认连线类型：
          </div>
          <div class="item" *ngFor="let item of lineNames">
            <a (click)="onSelLine(item)">
              <i class="iconfont icon-{{ item }}"></i>
            </a>
          </div>
        </div>
      </div>
      <div class="item lines">
        <a>
          <i class="iconfont icon-from-{{ fromArrowType }}" style="position: relative;top: .06rem;"></i>
        </a>
        <div class="dropdown">
          <div class="item">
            默认起点箭头：
          </div>
          <div class="item" *ngFor="let item of arrowTypes">
            <a (click)="onSelFromArrow(item)">
              <i class="iconfont icon-from-{{ item }}"></i>
            </a>
          </div>
        </div>
      </div>
      <div class="item lines">
        <a>
          <i class="iconfont icon-to-{{ toArrowType }}" style="position: relative;top: .06rem;"></i>
        </a>
        <div class="dropdown">
          <div class="item">
            默认终点箭头：
          </div>
          <div class="item" *ngFor="let item of arrowTypes">
            <a (click)="onSelToArrow(item)">
              <i class="iconfont icon-to-{{ item }}"></i>
            </a>
          </div>
        </div>
      </div>
      <div class="separator"></div>
      <div class="item" (click)="onMenu('save')" title="保存到云端">
        <a>
          <i class="iconfont icon-upload"></i>
        </a>
      </div>
      <div class="item" title="保存到本地">
        <a (click)="onMenu('down')">
          <i class="iconfont icon-download"></i>
        </a>
      </div>
      <div class="item" [class.disabled]="!file.id" [title]="file.id && file.shared ? '已分享，点击取消' : '分享'">
        <a (click)="onMenu('share')">
          <i class="iconfont icon-share" [class.primary]="file.id && file.shared"></i>
        </a>
      </div>
    </div>
    <div class="separator"></div>
    <div class="flex pr20" *ngIf="!user">
      <div class="item">
        <a (click)="onSignup()">注册</a>
      </div>
      <div class="gray">/</div>
      <div class="item">
        <a (click)="onLogin()">登录</a>
      </div>
    </div>
    <div class="flex ph20" *ngIf="user">
      <div class="item">
        <a [href]="urls.account" class="flex middle">
          <ui-avatar
            class="mr5"
            [letters]="user.usernamePinyin"
            [img]="user.avatarUrl"
            [colors]="['#ff4d4f']"
          ></ui-avatar>
          {{ user.username }}
          <i class="iconfont icon-angle-down"></i>
        </a>
        <div class="dropdown right">
          <div class="item"><a [href]="urls.account" target="_blank">个人中心</a></div>
          <div class="item line"></div>
          <div class="item"><a routerLink="/user/home">我的文件</a></div>
          <div class="item"><a routerLink="/user/favorite">我的收藏</a></div>
          <div class="item line"></div>
          <div class="item"><a (click)="onSignout()">退出</a></div>
        </div>
      </div>
    </div>
  </div>
  <div class="body">
    <router-outlet></router-outlet>
  </div>
</div>

<img src="/assets/img/logo.png" hidden="hidden" />

<div class="modal" *ngIf="showLicense">
  <div class="modal-content">
    <div class="modal-header pointer" uiDivMove [isHead]="true">
      <div class="caption">许可与声明</div>
      <i class="fr iconfont icon-close" (click)="showLicense = null"></i>
    </div>
    <div class="modal-body">
      <p>本画图工具开源，支持MIT协议。希望大家一起参与维护！</p>
      <p>所有权和解释权归le5le.com和开发者Alsmile所有！</p>
      <p>@2019 le5le.com</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="button" (click)="showLicense = null">确定</button>
    </div>
  </div>
</div>

<div class="modal" *ngIf="showHelp">
  <div class="modal-content">
    <div class="modal-header pointer" uiDivMove [isHead]="true">
      <div class="caption">资助与加入</div>
      <i class="fr iconfont icon-close" (click)="showHelp = null"></i>
    </div>
    <div class="modal-body">
      <li>个人开发不易，时间、各种资源都有限！</li>
      <li>
        热烈欢迎和期待大家一起参与，联系：
        <div class="ml30">邮箱：alsmile123@qq.com</div>
        <div class="ml30">微信：alsmile123</div>
      </li>
      <li>个人购买云服务器资源拮据，CPU、内存、磁盘、网络都很小，在线用户将有限：</li>
      <div class="text-center mt10">
        <div class="gray">赏五毛</div>
        <img class="mt5" src="/assets/img/wechatPay.png" width="120" />
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="button" (click)="showHelp = null">确定</button>
    </div>
  </div>
</div>

<div class="modal" *ngIf="showAbout">
  <div class="modal-content">
    <div class="modal-header pointer" uiDivMove [isHead]="true">
      <div class="caption">关于</div>
      <i class="fr iconfont icon-close" (click)="showAbout = null"></i>
    </div>
    <div class="modal-body">
      <p>本产品目前虽然属于个人作品，但会一直继续完善，做的更好，欢迎加入或资助！</p>
      <p>欢迎有任何问题或建议请联系：</p>
      <p>邮箱：alsmile123@qq.com</p>
      <p>微信：alsmile123</p>
      <div class="text-center">
        <a href="http://topology.le5le.com/assets/img/topology_wechat.jpg?t=1" target="_blank">
          <img src="http://topology.le5le.com/assets/img/topology_wechat.jpg?t=1" style="height: 3rem" />
        </a>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="button" (click)="showAbout = null">确定</button>
    </div>
  </div>
</div>
